<template>
  <!-- 收益页面 -->
  <div>
    <div class="title">
      <span>收益</span>
    </div>
    <van-tabs>
      <!-- 全部已完成订单信息 -->
      <van-tab title="全部">
        <van-card
          v-for="item in orderData"
          :key="item.id"
          :thumb="item.customer.userFace"
        >
          <template #tags>
            <van-tag class="name">
              <span>{{ item.customer.username }}</span>
            </van-tag>
            <van-tag class="sta">{{ item.status }}</van-tag>
            <br />
            <van-tag>{{
              item.address.city + item.address.area + item.address.address
            }}</van-tag>
            <br />
            <van-tag class="time">
              {{ moment(item.serviceTime).format("YYYY-MM-DD HH:mm:SS") }}
            </van-tag>
            <van-tag class="total">￥{{ item.total }}</van-tag>
          </template>
        </van-card>
      </van-tab>
      <!-- 提现信息 -->
      <van-tab title="提现">
        <!-- 全部订单 -->
        <van-card v-for="item in incomeList" :key="item.id">
          <template #tags>
            
            <van-tag class="name_income">
              <span>提现到-银行卡</span>
            </van-tag>
            <van-tag class="sta">
              <div
                v-if="item.status == '通过'"
                style="color: green; font-size: 14px"
              >
                {{ item.status }}
              </div>
              <div
                v-if="item.status == '不通过'"
                style="color: red; font-size: 14px"
              >
                {{ item.status }}
              </div>
              <div
                v-if="item.status == '未审核'"
                style="color: red; font-size: 14px"
              >
                {{ item.status }}
              </div>
            </van-tag><br>
            <van-tag class="time_income">
              <span>{{ item.applyTime | fmtDate_global }}</span>
            </van-tag>
            <van-tag class="total_income">
              <span>￥{{ item.money + ".00" }}</span>
            </van-tag>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
import { mapState, mapActions } from "vuex";
import moment from "moment";

export default {
  data() {
    return {
      page: 1,
      pageSize: 1000,
      status: "已完成",
      employeeId: "",
      id: "",
      orderData: "",
      type: "提现",
      incomeList : [],
    };
  },
  created() {
    this.getAllorderData();
    this.screenOrder();
    this.getAllIncomeData();
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapState("income", ["incomeData"]),
  },
  methods: {
    //转换时间格式
    moment,
    //个人订单
    ...mapActions("income", ["pageQueryEmployee"]),
    //获取用户token
    ...mapActions("user", ["getUserInfo"]),
    //查询、筛选已完成、该员工id的订单
    async getAllorderData() {
      // 获取参数
      const data = {
        page: this.page,
        pageSize: this.pageSize,
        employeeId: this.id,
        status: this.status,
      };
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res = await get("/order/pageQuery", data);
      this.orderData = res.data.data.list;
    },
    //通过token获取员工id
    async screenOrder() {
      let token1 = localStorage.getItem("token");
      let res = await get("/user/info", { token: token1 });
      let id = res.data.data.id;
    },
    //获取提现信息
    async getAllIncomeData() {
      // 获取参数
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        id: this.id,
        applyType: this.type,
      };
      // 通过对应的参数发送网络请求
      let res = await get("/accountApply/pageQueryAccountApply", data);
      console.log(res.data.data.list,"111111");
      this.incomeList = res.data.data.list;
    },
  },
};
</script>
<style scoped>
.title span {
  color: aliceblue;
  font-size: 17px;
  text-align: center;
  line-height: 60px;
  vertical-align: middle;
}
.title {
  width: 100%;
  height: 60px;
  margin: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0)
    linear-gradient(to right, rgb(224, 105, 139), #b490ca) repeat scroll 0% 0%;
}
.van-card__desc {
  margin-top: 10px;
  font-size: 12px;
}
.van-card {
  box-shadow: 0 0 10px #d5d4529e;
  font-size: 16px;
  border-radius: 15px;
  background-color: #f2c59412;
}
.name span {
  font-size: 28px;
  font-family: times new roman;
  margin: 0px 20px;
}
.van-tag {
  text-align: center;
  border: none;
  background: none;
  color: rgb(104, 89, 89);
  font-size: 15px;
  margin: 5px 10px;
}
.time {
  font-size: 15px;
}
.sta,
.total {
  color: rgb(187, 91, 91);
  float: right;
  margin: 10px 10px;
}
.name_income{
  font-size: 17px;
  margin: 15px 15px;
}
.time_income{
  font-size: 17px;
  font-family: times new roman;
  margin: 10px 15px;
}
.total_income{
  font-family: times new roman;
  font-size: 18px;
  float: right;
}
</style>
